import { Column } from '@ant-design/plots';
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import { forEach, groupBy } from 'lodash';
import { Tprops } from './types';
import WarpDiv from './warp';
import { echartStyle, titleStyle } from './config';

const ACColu2 = (props:Tprops) => {

  const data =props.data
  const annotations = [];
  console.log(groupBy(data, 'labelName'))
  forEach(groupBy(data, 'labelName'), (values, k) => {
    const value = values.reduce((a, b) => a + b.value, 0);
    annotations.push({
      type: 'text',
      data: [k, value],
      // style: {
      //   textAlign: 'center',
      //   fontSize: 14,
      //   fill: 'rgba(0,0,0,0.85)',
      // },
      xField: 'labelName',
      yField: 'value',
      style: {
        text: `${value}`,
        textBaseline: 'bottom',
        position: 'top',
        textAlign: 'center',
      },
      tooltip: false,
    });
  });

  const config = {
    data,
    xField: 'labelName',
    yField: 'value',
    stack: true,
    title: {
      title: props.title,
      ...titleStyle
    },
    style:{
      ...echartStyle
    },
    colorField: 'type',
    // label: {
    //   text: 'value',
    //   textBaseline: 'bottom',
    //   position: 'inside',
    // },
    annotations,
  };
  return  <WarpDiv><Column {...config} /></WarpDiv>;
};

export default ACColu2;